<template>
  <div>
    <p>商品详情</p>
    <div>名称：{{$route.params.name}}</div>
    <button @click="num ++">加入购物车</button>
    <span>来自vuex的数据:{{$store.state.num}}</span>
    <p>
      <router-link to="/detail/OnePlus">安卓新机皇：One Plus 8</router-link>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0
    }
  },
  watch: {
    // 监听路由的变化，可以使用深监听和浅监听
    $route(newVal) {
      console.log(`我正在获取${newVal.params.name}的数据...页面即将出现${newVal.params.name}的数据`);
    }
  },
  // 当做钩子函数看待
  beforeRouteUpdate(to, from, next) {
    console.log(to, from);
    next()
  },
  created() {
    console.log(`我正在获取${this.$route.params.name}的数据...页面即将出现${this.$route.params.name}的数据`);
  }
}
</script>

<style>

</style>